<template>
	<div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="dataList"
			style="margin-bottom:40px"
			:header-row-style="{ height: '24px', lineHeight: '24px' }"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				min-width="150"
				prop="venueTypeCode"
				:label="'所属场馆'"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ venueTypeCode(scope.row.venueTypeCode) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="loginStatus"
				align="center"
				:label="'限红/赛事模版'"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.venueTypeCode !== 'ty'">
						{{ scope.row.templateName || '-' }}
					</span>
					<el-button
						v-else
						type="text"
						size="medium"
						@click="templateFn(scope.row)"
					>
						{{ scope.row.templateName }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column
				prop="loginStatus"
				align="center"
				:label="'其他限制'"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.venueTypeCode !== 'ty'">
						-
					</span>
					<el-button
						v-else
						type="text"
						size="medium"
						@click="otherFn(scope.row)"
					>
						查看详情
					</el-button>
				</template>
			</el-table-column>
			<el-table-column
				prop="loginStatus"
				align="center"
				:label="'状态'"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.status === 2">
						{{ statusFn(scope.row.status) }}
					</span>
					<span v-else-if="!scope.row.status" class="redColor">
						-
					</span>
					<span v-else class="redColor">
						{{ statusFn(scope.row.status) }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="loginStatus"
				align="center"
				:label="$t('common.actions')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<el-button
						type="text"
						v-if="hasPermission('90750072')"
						size="medium"
						@click="edidFn(scope.row)"
					>
						{{ $t('agent.edit_info') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 查看体育限红模板 -->
		<TemplateDetails
			v-if="templateDetails"
			:parentData="{
				merchantId: parentData.merchantId,
				templateId: curData.templateId
			}"
			:visible.sync="templateDetails"
			@handleVisible="loadData"
			:curData="curData"
		/>
		<!-- 体育编辑 -->
		<TyEditDialog
			v-if="tyEditDetails"
			:parentData="parentData"
			:userInfo="userInfo"
			:visible.sync="tyEditDetails"
			@handleVisible="loadData"
			:curData="curData"
		/>
		<!-- 真人编辑 -->
		<EditDialog
			v-if="editDetails"
			:userInfo="userInfo"
			:parentData="parentData"
			:visible.sync="editDetails"
			@handleVisible="loadData"
			:curData="curData"
		/>
		<!-- 其他限制详情 -->
		<OtherDetails
			v-if="otherDetails"
			:parentData="parentData"
			:visible.sync="otherDetails"
			@handleVisible="otherDetails = false"
			:curData="curData"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import TemplateDetails from './components/templateDetails.vue'
import TyEditDialog from './components/tyEditDialog.vue'
import EditDialog from './components/editDialog.vue'
import OtherDetails from './components/otherDetails.vue'
export default {
	mixins: [list],
	props: {
		userInfo: { type: Object, default: {} },
		parentData: { type: Object, default: () => ({}) }
	},
	components: {
		TemplateDetails,
		OtherDetails,
		TyEditDialog,
		EditDialog
	},
	data() {
		return {
			curData: {},
			dataList: [],
			otherDetails: false,
			tyEditDetails: false,
			editDetails: false,
			templateDetails: false,
			refreshLoading: false
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		// 取场馆限红模板列表
		loadData(val) {
			this.refreshLoading = true
			this.$api
				.getMemberVenueLimitRed({
					merchantId: this.parentData.merchantId,
					memberId: this.parentData.userId
				})
				.then((res) => {
					this.dataList = res?.data || []
				})
				.finally(() => {
					this.refreshLoading = false
				})
		},
		templateFn(row) {
			this.curData = row
			this.templateDetails = true
		},
		otherFn(row) {
			this.curData = row
			this.otherDetails = true
		},
		edidFn(row) {
			this.curData = row
			this.curData.name = this.venueTypeCode(row.venueTypeCode)
			if (row.venueTypeCode === 'ty') {
				this.tyEditDetails = true
			} else {
				this.editDetails = true
			}
		},
		venueTypeCode(val) {
			const venueName = {
				ty: '体育场馆',
				zr: '真人场馆',
				dj: '电竞场馆',
				qp: '棋牌场馆',
				cp: '彩票场馆',
				dy: '电子场馆',
				by: '捕鱼场馆',
				dz: '德州场馆'
			}
			return venueName[val]
		},
		statusFn(val) {
			const status = {
				1: '修改中',
				2: '正常',
				3: '失败'
			}
			return status[val]
		},
		refresh() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.btn-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.backgroundTitelBox {
		width: 180px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #000;
		color: rgb(255, 255, 255);
		margin: 20px;
		margin-left: 0;
	}
}
.pageValue {
	text-align: right;
}
</style>
